Home > Exporting vector images > XAML

Print this page

XAML

You can save your Expression Design artwork to disk as a XAML (Extensible Application Markup Language) file by clicking Export on the File menu (or press CTRL+SHIFT+X). After you give the file a name and tell Expression Design where to save it in the Export dialog box, select XAML from the Save as Type list, and then click the Save button. The Export XAML dialog box displays. This lets you determine how Expression Design should export the XAML file. The dialog box is broken down into two sections: Document format and Effects . To view or hide a category, click on its name.

Document format options

You can choose from among three methods of representing your content from the Document Format list:

• Canvas   To create objects that can be animated or manipulated interactively, for example in Microsoft® Expression Blend™, select the Canvas method.
• Silverlight   To create a file suitable for display using an application built for Microsoft Silverlight, choose Silverlight.
• Resource dictionary   To treat the content as a collection of reusable assets, select the Resource Dictionary method.

When the Canvas method is selected, you can choose how you want text blocks to be converted. Choosing Export editable TextBlocks maintains the text as individual, editable characters, even if the appearance of the text may change. Choosing Export flattened paths maintains the look of the text by converting each character to outlines so that they are no longer editable.

When the Resource Dictionary method is selected, two additional options become available:

• Group by  You can select from among three methods of grouping assets into resources. Select the Document grouping to generate a single resource for the entire document. Select the Layers grouping to generate a resource for each layer in the document. Select the Objects grouping to generate a resource for each object in the document.
• Path output type  You can select from among two types of output for paths. Select the Drawing brush type to create resources that can be used inside XAML wherever a Brush type can be used. Select the Drawing image type to create resources that must be wrapped inside a Brush but are faster to render.

Effects options

• Rasterize life effects   Expression Design can rasterize (turn into bitmapped images) Live Effects. This helps maintain the appearance of your artwork as much as possible. If you disable this check box, some objects might be exported as solid lines or fills.
• Vectorize image strokes   Brush strokes based on bitmapped images can be vectorized into overlapping solid fill objects for the export. Small vectorization levels will simplify the exported image stroke. Increasing the vectorization level will add more detail to the exported image stroke.

If you have image objects in your Expression Design document, they will be stored in a folder in the same directory as your exported XAML file.

After making your choices in this dialog box, click Export to start the exporting process.

Note that colors in your exported XAML code are based on sRGB and are not color managed. If you are using a custom color monitor profile, the colors you see in Expression Design may be different than those displayed in your final XAML-editing software.

Preview

The Graphics tab lets you see how the exported content will be rendered. It contains various tools and options to pan and zoom the preview image.

• Zoom  When you select the Zoom tool  you can click anywhere in the view area to zoom in on that position. Hold down the ALT key when you click to zoom out.
• Pan  The Pan tool  lets you scroll the view area around by clicking, and then dragging.
• Background  The Background list lets you select the background color. This is useful for previewing images that are partially transparent. The choice of background has no effect on the exported XAML file.

You can hide the preview by clicking the Hide button. When the preview is hidden, you can show it again by clicking the Preview button.

XAML Code

If you want to see the source code of the exported XAML file, click the XAML Code tab along the right edge of the preview window. Note that you can copy this code out to the Clipboard by selecting the text you want (or click in the code area and press CTRL+A to select all of it), and then pressing CTRL+C.

Alternately, you can bypass the XAML Export dialog box entirely by copying one or more objects from your document window and pasting them into a XAML-aware application (such as Microsoft Expression Blend). In this case, the XAML code is based on the settings in the Clipboard (XAML) page of the  Options dialog box.